<template>
  <div>
  

    <!-- 嵌套路由，根据二级路由地址 动态显示routerview的内容 -->
    <keep-alive>
      <router-view />
    </keep-alive>

    <!-- 底部选项卡 -->
    <!-- 底部选项卡  - 油价 +  调价 + 走势 + 资讯 + 出行 -->
    <mt-tabbar v-model="selected" fixed>
      <mt-tab-item id="index">
        <img
          v-if="selected == 'index'"
          src="../assets/zhuye_2.png"
          alt=""
          slot="icon"
        />
        <img v-else src="../assets/zhuye_1.png" alt="" slot="icon" />
        油价
      </mt-tab-item>
      <mt-tab-item id="price">
        <img
          v-if="selected == 'price'"
          src="../assets/rili_2.png"
          alt=""
          slot="icon"
        />
        <img v-else src="../assets/rili_1.png" alt="" slot="icon" />
        调价</mt-tab-item
      >
      <mt-tab-item id="trend">
        <img
          v-if="selected == 'trend'"
          src="../assets/zoushi_2.png"
          alt=""
          slot="icon"
        />
        <img v-else src="../assets/zoushi_1.png" alt="" slot="icon" />
        走势</mt-tab-item
      >
      <mt-tab-item id="oilnew">
        <img
          v-if="selected == 'oilnew'"
          src="../assets/zixun_2.png"
          alt=""
          slot="icon"
        />
        <img v-else src="../assets/zixun_1.png" alt="" slot="icon" />
        资讯</mt-tab-item
      >
      <mt-tab-item id="me">
        <img
          v-if="selected == 'me'"
          src="../assets/daohang_2.png"
          alt=""
          slot="icon"
        />
        <img v-else src="../assets/daohang_1.png" alt="" slot="icon" />
        我的</mt-tab-item
      >
    </mt-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: this.$route.path.split("/").pop(), //底部选项卡的默认选中项
    };
  },
  watch: {
    // 监听selected的变化
    selected(newValue, oldValue) {
      console.log(newValue);
      this.$router.push(newValue);
    },
  },
};
</script>

<style scoped>
.mint-header {
  height: 70px;
  background-color: #db261d;
  font-size: 1.4em;
}
.mint-tabbar > .mint-tab-item.is-selected {
  color: #db261d;
}
</style>
